<template>
  <div class="box">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="bg" />
      <p class="right">
        可预约人数
        <span>999999</span>
        人
      </p>
    </div>
    <div class="number">
      <span v-for="(item, index) in people" :key="index" class="word">
        {{ item }}
      </span>
    </div>
    <div ref="echartsRef" class="echarts" />
  </div>
</template>

<script setup lang="ts" name="Tourist">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

onMounted(() => {
  let mycharts = echarts.init(echartsRef.value);
  mycharts.setOption({
    //标题组件
    //x|y轴组件
    xAxis: {
      show: false,
    },
    yAxis: {
      show: false,
    },
    //系列:决定你展示什么样的图形图标
    series: [
      {
        type: 'liquidFill', //系列
        data: [0.6, 0.5, 0.4], //展示的数据
        waveAnimation: true, //动画
        animationDuration: 2000,
        animationDurationUpdate: 2000,
        silent: true,
        radius: '70%', //半径
        backgroundStyle: {
          color: 'transparent', // 背景颜色
        },
        z: 100,
        label: {
          show: true,
          fontSize: 20,
          formatter: function (data: any) {
            return `预约量\n${data.value * 100}%`;
          },
        },
        color: [
          {
            type: 'linear', // 渐变类型：线性渐变
            x: 0, // 渐变起点 x 坐标
            y: 0, // 渐变起点 y 坐标
            x2: 0, // 渐变终点 x 坐标
            y2: 1, // 渐变终点 y 坐标
            colorStops: [
              { offset: 0, color: 'rgba(41, 224, 244,0.7' }, // 渐变起始颜色
              { offset: 1, color: 'rgba(18, 131, 183,1)' }, // 渐变结束颜色
            ],
          },
        ],
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2, // 边框宽度
            borderColor: '#26D6E6', // 边框颜色
          },
        },
      },
      {
        type: 'pie',
        padAngle: 5,
        radius: ['84%', '86%'],
        silent: true,
        itemStyle: {
          color: 'rgba(41, 252, 255,0.7)',
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      },
      {
        type: 'pie',
        padAngle: 180,
        startAngle: 90,
        radius: ['80%', '90%'],
        silent: true,
        itemStyle: {
          color: '#23C8DB',
          borderRadius: 10,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1],
      },
      {
        //内阴影
        type: 'pie',
        radius: ['0%', '70%'],
        silent: true,
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              { offset: 0.8, color: 'rgba(35, 195, 219,0)' },
              { offset: 1, color: 'rgba(35, 195, 219,1)' },
            ],
          },
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        animation: false,
        data: [1],
      },
    ],
    //布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  });
});

let echartsRef = ref();

let people = ref<string>('215908人');
</script>

<style lang="scss" scoped>
.box {
  background: url('../../../../assets/images/screen/dataScreen-main-lt.png') no-repeat;
  background-size: 100% 100%;
  color: white;
  .top {
    .title {
      font-size: 20px;
    }
    .bg {
      width: 68px;
      height: 7px;
      background: url('../../../../assets/images/screen/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
    .right {
      float: right;
      font-size: 20px;
      margin-right: 10px;
      span {
        color: orangered;
      }
    }
  }
  .number {
    margin-top: 40px;
    display: flex;
    padding: 0 15px;
    justify-content: space-around;
    .word {
      background: url('../../../../assets/images/screen/total.png') no-repeat;
      background-size: 100% 100%;
      width: 55px;
      line-height: 55px;
      text-align: center;
      color: #29fcff;
      font-size: 35px;
    }
  }
  .echarts {
    width: 100%;
    height: 260px;
  }
}
</style>
